<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js" lang="ZXX">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Vistar - Clean, Minimal eCommerce HTML5 Template </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
		<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
        <!-- Place favicon.ico in the root directory -->

		<!-- CSS here -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.css">
        <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="assets/css/themify-icons.css">
        <link rel="stylesheet" href="assets/css/dripicons.css">
        <link rel="stylesheet" href="assets/css/meanmenu.css">
        <link rel="stylesheet" href="assets/css/slick.css">
        <link rel="stylesheet" href="assets/css/main.css">
        <link rel="stylesheet" href="assets/css/responsive.css">
    </head>
    <body>


       <!-- header-start -->
	<header>

		<div id="sticky-header" class="main-menu-area pl-55 pr-55">
			<div class="container-fluid">
				<div class="row">
					<div class="col-xl-3 col-lg-2 d-flex align-items-center">
						<div class="logo">
							<a href="Main.jsp"><img src="assets/img/logo/logo.png"
								alt="" /></a>
						</div>
					</div>
					<div class="col-xl-6 col-lg-7">
						<div class="header-search f-right d-none d-xl-block">
							<form class="header-search-form">
								<input placeholder="Search" type="text">
								<button type="submit">
									<i class="dripicons-search"></i>
								</button>
							</form>
						</div>
						<div class="main-menu text-center">
							<nav id="mobile-menu">
								<ul>
									<li class="active"><a href="#">手机品牌</a>
										<ul class="sub-menu text-left">
											<li><a
												href="http://localhost:8080/phone-introduce/Huawei-display.jsp">华为</a></li>
											<li><a href="index-2.html">小米</a></li>
											<li><a href="index-3.html">苹果</a></li>
											<li><a href="index-4.html">OPPO</a></li>
											<li><a href="index-5.html">VIVO</a></li>
											<li><a href="index-6.html">魅族</a></li>
											<li><a href="index-6.html">一加</a></li>
											<li><a href="index-6.html">锤子</a></li>
											<li><a href="index-6.html">中兴</a></li>
											<li><a href="#">...</a></li>
										</ul></li>
									<li><a href="http://localhost:8080/phone-introduce/manage?method=showActivityUsersList">活动情况</a>
								</ul>
							</nav>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<div class="extra-info">
			<div class="close-icon">
				<button>
					<i class="far fa-window-close"></i>
				</button>
			</div>
			<div class="logo-side mb-30">
				<a href="Main.jsp"> <img src="assets/img/logo/white.png"
					alt="" />
				</a>
			</div>
			<div class="side-info mb-30">
				<div class="contact-list mb-30">
					<h4>Office Address</h4>
					<p>123/A, Miranda City Likaoli Prikano, Dope</p>
				</div>
				<div class="contact-list mb-30">
					<h4>Phone Number</h4>
					<p>+0989 7876 9865 9</p>
					<p>+(090) 8765 86543 85</p>
				</div>
				<div class="contact-list mb-30">
					<h4>Email Address</h4>
					<p>
						<a href="/cdn-cgi/l/email-protection" class="__cf_email__"
							data-cfemail="1d74737b725d78657c706d7178337e7270">[email&#160;protected]</a>
					</p>
					<p>
						<a href="/cdn-cgi/l/email-protection" class="__cf_email__"
							data-cfemail="37524f565a475b52195a565e5b775f425a1954585a">[email&#160;protected]</a>
					</p>
				</div>
			</div>
			<div class="instagram">
				<a href="#"> <img src="assets/img/portfolio/p1.jpg" alt="">
				</a> <a href="#"> <img src="assets/img/portfolio/p2.jpg" alt="">
				</a> <a href="#"> <img src="assets/img/portfolio/p3.jpg" alt="">
				</a> <a href="#"> <img src="assets/img/portfolio/p4.jpg" alt="">
				</a> <a href="#"> <img src="assets/img/portfolio/p5.jpg" alt="">
				</a> <a href="#"> <img src="assets/img/portfolio/p6.jpg" alt="">
				</a>
			</div>
			<div class="social-icon-right mt-20">
				<a href="#"> <i class="fab fa-facebook-f"></i>
				</a> <a href="#"> <i class="fab fa-twitter"></i>
				</a> <a href="#"> <i class="fab fa-google-plus-g"></i>
				</a> <a href="#"> <i class="fab fa-instagram"></i>
				</a>
			</div>
		</div>
	</header>
       <!-- header-end -->

        <main>

            <!-- breadcrumb-area-start -->
            <div class="breadcrumb-area grey-bg pt-155 pb-155">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="breadcrumb-text text-center">
                                <h1>华为nova
                                </h1>
                                <ul class="breadcrumb-menu">
                                    <li><a href="index.html">华为手机序列</a>/</li>
                                    <li><span>华为nova</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- breadcrumb-area-start -->


            <!-- shop-banner-area start -->
            <section class="shop-banner-area pt-120 pb-90">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="shop-thumb-tab mb-30">
                                <ul class="nav" id="myTab2" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                            aria-selected="true"><img src="assets/img/机型介绍图/nova5_12.jpg" alt=""> </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                                            aria-selected="false"><img src="assets/img/机型介绍图/nova5_13.jpg" alt=""></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile1" role="tab"
                                            aria-selected="false"><img src="assets/img/机型介绍图/nova5_14.jpg" alt=""></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="product-details-img mb-30">
                                <div class="tab-content" id="myTabContent2">
                                    <div class="tab-pane fade show active" id="home" role="tabpanel">
                                        <div class="product-large-img">
                                            <img src="assets/img/机型介绍图/nova5_12.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="profile" role="tabpanel" >
                                        <div class="product-large-img">
                                            <img src="assets/img/机型介绍图/nova5_13.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="profile1" role="tabpanel" >
                                        <div class="product-large-img">
                                            <img src="assets/img/机型介绍图/nova5_14.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-5">
                            <div class="product-details mb-30">
                                <div class="product-details-title">
                                   <p>华为（HUAWEI）</p>
                                   <h1>华为&nbsp;nova</h1>
                                   <div class="price details-price pb-30 mb-20">
                                       <span>￥${phonePrice}</span>
                                   </div>
                                </div>
                                <p>华为nova于9月1日在德国IFA正式发布。华为nova产品定位为“年轻手机”，专为乐活一族设计，产品
								   主打“潮流时尚”设计，同步强化了拍照趣味性和音乐等体验。<br>
								   外观特色：弧形、曲面设计<br>
								   拍照特色：指纹自拍、美妆2.0、美颜3.0<br>
								   音效特色：支持DTS音效
								   
								</p>
                                <div class="product-cat mt-30 mb-30">
                                    <span> 机身颜色： </span>
                                    <a href="#">香槟金（白）</a>
                                    <a href="#">香槟金（黑）</a>
                                    <a href="#">玫瑰金</a>
                                </div>
                                <div class="product-social mb-45">
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-behance"></i></a>
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    <a href="#"><i class="fab fa-youtube"></i></a>
                                </div>
                                <div class="product-details-action">
                                    <form action="#">
                                        <div class="plus-minus">
                                          
                                        </div>
                                        
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- shop-banner-area end -->
            <!-- product-desc-area start -->
            <section class="product-desc-area pb-90">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="bakix-details-tab">
                                <ul class="nav text-center justify-content-center pb-30 mb-50" id="myTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="desc-tab" data-toggle="tab" href="#id-desc" role="tab"
                                            aria-controls="home" aria-selected="true">测评文章 </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="id-add-in" data-toggle="tab" href="#id-add" role="tab"
                                            aria-controls="profile" aria-selected="false">手机参数</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="id-r" data-toggle="tab" href="#id-rev" role="tab"
                                            aria-controls="profile" aria-selected="false">评论区</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="id-desc" role="tabpanel" aria-labelledby="desc-tab">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="event-text">
                                                <p>
													<strong>全新nova5 Pro VS OPPO Reno评测</strong>
												</p>
                                                <p>
													说到适合年轻人的手机，那就不得不提到华为nova系列了，其定位于青春时尚，自2016年9月
													上线后，就推出了多款深受年轻消费者青睐的智能手机。那华为nova系列怎么样？此系列高配
													nova5 Pro，与定位相似的OPPO Reno10倍变焦版相比，哪款更好呢？<br>
													华为nova5 Pro是一款定位于中高端的机型，其外形设计和性能配置较上一代均有所升级，今
													年上市之后口碑不错；而OPPO Reno10倍变焦版则是Reno系列旗舰机型，定位于OPPO下一个十
													年的开山之作，外在内在均拥有较强竞争力。
												</p>
												<div align="center">
													<a href="#">
													    <img src="assets/img/推文图/nova_1.jpg" alt="">
													</a>
												</div>
												<p>
													外观设计方面，全新nova5 Pro正面采用一块6.39英寸水滴屏，前置元件均收敛于其中，虽然
													不是全面屏设计有些遗憾，但其屏占比依然达到了91%，可以说相当优越了。手机背面采用3D
													炫光设计，拥有绮境森林、仲夏紫、珊瑚橙、亮黑色4款全新配色可选，机身薄至7.33mm，整
													体持握感相当不错。
												</p>
												
												<div align="center">
													<a href="#">
													    <img src="assets/img/推文图/nova_2.jpg" alt="">
													</a>
												</div>
												<p>
													相对而言，OPPO Reno10倍变焦版在外形设计方面会更大胆一些。其正面采用一块6.6英寸的
													全面屏，无刘海、无开孔，前置元器件均隐藏于侧旋式升降结构中，需要时自动弹出，用完后
													自动收回。机身背面采用凝光渐变配色，有雾海绿、薄雾粉、极夜黑三款炫酷配色，全身无凸
													起，持握感更出众。
												</p>
												<div align="center">
													<a href="#">
													    <img src="assets/img/推文图/nova_3.jpg" alt="">
													</a>
												</div>
												<p>
													性能方面，nova5 Pro搭载麒麟旗舰980处理器，标配8GB LPDDR4X内存，最高支持8GB+256GB
													存储组合，游戏运行分外流畅，无论是玩大型手游还是看电影几乎都能完全胜任，加上华为40W
													快充技术，虽然电池容量仅3500mAh，但是续航能力非常强大，较上代有了较大提升。
												</p>
												<div align="center">
													<a href="#">
													    <img src="assets/img/推文图//nova_4.jpg" alt="">
													</a>
												</div>
												<p>
													而OPPO Reno10倍变焦版则采用了性能更为强劲的骁龙855处理器，同样支持最高8GB+256GB内
													存组合，同时更配备4065mAh大电池、支持VOOC 闪充 3.0、GameBoost 2.0、铜管液冷散热等
													技术，在玩机流畅度、续航能力、温控方面的表现都十分出色。
												</p>
												<p>
													作为定位于年轻消费群体的机型，两款机型在拍照实力方面也各有千秋。华为nova5 Pro采用
													后置AI四摄，4800万像素的高清主摄+1600万像素的超广角镜头+200万像素的微距镜头+200万
													像素的背景虚化镜头，四颗摄像头配合，在广角、微距、夜景、人像拍摄方面均有不错的表现。
												</p>
												<div align="center">
													<a href="#">
													    <img src="assets/img/推文图/nova_5.jpg" alt="">
													</a>
												</div>
												<p>如其名，OPPO Reno10倍变焦版搭载了OPPO首发的10倍混合光学变焦技术，摄像头配备索尼IMX585传感器，
												通过4800万像素高清主摄+1300万像素潜望式长焦摄像头+800W超广角摄像头的“三摄”结构，实现10倍光学变焦、
												60倍数码变焦。加上双OIS光学防抖、超清夜景2.0、炫彩2.0等模式加持，无论在哪种拍摄环境下，都能实现离
												得越远、拍得更清晰。</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="id-add" role="tabpanel" aria-labelledby="id-add-in">
                                    <div class="additional-info">
                                        <div class="table-responsive">
                                            <h4>具体参数</h4>
                                            <table class="table">
                                            
                                                <tbody>
                                                    <tr>
                                                        <th>[CPU型号]</th>
                                                        <td class="product_weight">高通 骁龙625（MSM8953）</td>
                                                		<th>[前置像素]</th>
                                                		<td>800万像素=/td>
                                                		<th>[后置像素]</th>
                                                		<td>1200万像素</td>
                                                		
                                                							
                                                    </tr>
                                                    <tr>
                                                        <th>[运行内存]</th>
                                                        <td class="product_dimensions">4GB</td>
                                                		<th>[ROM]</th>
                                                		<td>64GB</td>
                                                		<th>[屏幕]</th>
                                                		<td>5英寸 1920x1080像素</td>
                                                    </tr>
                                                    <tr>
                                                        <th>[网络]</th>
                                                        <td class="product_dimensions">2G/3G/4G</td>
                                                		<th>[电池]</th>
                                                		<td>3020mAh</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="id-rev" role="tabpanel" aria-labelledby="id-r">
                                    <div class="additional-info">
                                        <div class="event-text mb-40">
                                           <ul>
                                            	<c:forEach items="${commentList}" var="comment">
                                            		<li>${comment.getUser_name()}:${comment.getUser_comment_content()}</li>
                                            		<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
                                            	</c:forEach>
                                            	<a href="#" style="text-decoration:underline;">更多评论</a>
                                            </ul>
                                            <br>
											<form action="phone" method="post">
                                           				<input type="hidden" name="method" value="submitNovaComment" />
                                           				<textarea name="comment" cols="40" rows="8" ></textarea>
                                           				<input type="submit" value="提交评论" />
                                           	</form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- product-desc-area end -->
    
        </main> 
        <!-- footer-start -->
        <footer>
            <div class="footer-area pt-100 pb-60 grey-bg pl-55 pr-55">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-6">
                            <div class="footer-wrapper mb-30">
                                <div class="footer-logo">
                                    <a href="Main.jsp"><img src="assets/img/logo/logo.png" alt=""></a>
                                </div>
                                <div class="footer-text pr-50">
                                  
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-2 col-md-6">
                            <div class="footer-wrapper ml-20 mb-30">
                                <h4 class="footer-title">Quick Link</h4>
                                <ul class="footer-menu footer-2-menu">
                                    <li><a href="#">About us</a></li>
                                    <li><a href="#">term</a></li>
                                    <li><a href="#">policy</a></li>
                                    <li><a href="#">service</a></li>
                                    <li><a href="#">My Account</a></li>
                                    <li><a href="#">Checkout</a></li>
                                    <li><a href="#">Order tracking</a></li>
                                    <li><a href="#">Help & Support</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-2 col-md-3">
                            <div class="footer-wrapper ml-70 mb-30">
                                <h4 class="footer-title">Contact Us</h4>
                                <ul class="footer-link">
                                    <li>Sagrada Familia, Herba <br>
                                        Street Front USA</li>
                                    <li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f59491989c9bb5908d9498859990db969a98">[email&#160;protected]</a></li>
                                    <li>002- 01008431112</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-2 col-md-3">
                            <div class="footer-wrapper mb-30 ml-70">
                                <h4 class="footer-title">Follow Us</h4>
                                <ul class="footer-menu">
                                    <li><a href="#">Facebook/Vistar</a></li>
                                    <li><a href="#">Twitter/Vistar</a></li>
                                    <li><a href="#">Linkdin/Vistar</a></li>
                                    <li><a href="#">Skype_Vistar</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-5">
                            <div class="footer-wrapper mb-30">
                                <h4 class="footer-title">Sign up to Newsletter</h4>
                                <div class="footer-nfo">
                                    <p>But I must explain to you how all this mistak. </p>
                                </div>
                                <div class="newsletters-form">
                                    <form action="#">
                                        <input placeholder="Enter Your Email :" type="email">
                                        <button type="submit">subscribe</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom-area footer-2-bottom pt-25 pb-25 grey-bg pr-55 pl-55">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-8 col-lg-8 col-md-8">
                            <div class="copyright">
                                <p> Copyright <i class="far fa-copyright"></i> 2018 <a href="#">BDevs.</a> All Rights Reserved</p>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4">
                            <div class="footer-bottom-img text-center text-lg-right">
                                <img src="assets/img/footer/01.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-end -->




		<!-- JS here -->
        
		<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
        <script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
        <script src="assets/js/popper.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/isotope.pkgd.min.js"></script>
        <script src="assets/js/jquery.countdown.min.js"></script>
        <script src="assets/js/slick.min.js"></script>
        <script src="assets/js/jquery.meanmenu.min.js"></script>
        <script src="assets/js/ajax-form.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.scrollUp.min.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/jquery.magnific-popup.min.js"></script>
        <script src="assets/js/plugins.js"></script>
        <script src="assets/js/main.js"></script>
    </body>
</html>